<template>
    <!-- 查看路口弹窗 -->
    <div>
        <el-dialog
            title="路口详情"
            :visible.sync="dialogVisible"
            width="65%"
            :before-close="handleClose"
            center
        >
            <el-table :data="intersectionData" style="height: 500px" border center>
                <el-table-column label="路口名称" align="center" prop="intersectionName"></el-table-column>
                <el-table-column label="路口类型" align="center" prop="intersectionType"></el-table-column>
                <el-table-column label="管理员" align="center" prop="managerName"></el-table-column>
                <el-table-column label="规划员" align="center" prop="plannerName"></el-table-column>
                <el-table-column label="经度" align="center" prop="longitude"></el-table-column>
                <el-table-column label="纬度" align="center" prop="latitude"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>

    import { getTmIntersectionByRoadId } from "@/api/tm-road"

    export default {
        data(){
            return {
                dialogVisible: false,
                intersectionData: []
            }
        },
        methods: {
            open(id){
                this.dialogVisible = true;
                this.bindSearch(id)
            },
            handleClose(){
                this.dialogVisible = false
            },
            async bindSearch(id){
                this.intersectionData = []
                const { code = undefined, items = [] } = await getTmIntersectionByRoadId({ roadId: id });
                if (code === 200) {
                    this.intersectionData = items
                }   
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>